<template>
	<view>
		<view class="customer-item tn-bg-white" style="border-radius: 24rpx;margin: 0 30rpx 30rpx 30rpx;"
			v-for="(item, index) in list" :key="item.id">
			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding">
				<view class="justify-content-item">
					<view class="tn-flex tn-flex-row-center">
						<view class="tn-flex tn-flex-row-center tn-flex-col-center">
							<view class="image-pic tn-margin"
								style="background-image:url('https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1692940242409-assets/web-upload/fcc4eab6-b2ce-44eb-9165-c49b51f5f830.jpeg');background-size: cover;background-position: center;"
								@click="viewCustomerDetail(item)">
								<view class="image-product">
								</view>
							</view>
							<view class="tn-margin-right" style="width: 100%;">
								<view class="tn-text-bold clamp-text-1 tn-text-justify"
									@click="viewCustomerDetail(item)">
									<text class="">{{item.name || '未知客户'}}</text>
								</view>
								<view class="tn-padding-top-xs tn-color-gray" v-if="item.mobile"
									@click="callPhoneNumber(item.mobile)">
									{{formatPhone(item.mobile)}} <text
										class="tn-icon-phone tn-color-gray tn-padding-left-xs"></text>
								</view>
								<view class="tn-padding-top-xs tn-color-gray" v-else>
									暂无联系方式
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="tn-flex tn-flex-col-center tn-flex-row-center tn-margin-right">
					<view class="tn-bg-blue--light tn-round tn-text-xs tn-color-blue tn-margin-right-xs"
						style="padding: 10rpx 16rpx 10rpx 20rpx;" @click="addFollowUpRecord(item)">
						<text class="tn-text-bold">跟进</text>
						<text class="tn-icon-edit tn-padding-left-xs"></text>
					</view>
					<view class="tn-bg-blue--light tn-round tn-text-xs tn-color-blue"
						style="padding: 10rpx 16rpx 10rpx 20rpx;" @click="viewCustomerDetail(item)">
						<text class="tn-text-bold">详情</text>
						<text class="tn-icon-send-fill tn-padding-left-xs"></text>
					</view>
				</view>
			</view>


			<view class="customer-info" style="padding: 0 30rpx 30rpx 30rpx;" @click="viewCustomerDetail(item)">
				<view class="tn-padding-top-xs" v-if="item.customerName">
					<tn-tag shape="radius" backgroundColor="#01BEFF" v-if="item.statusTypeName"
						fontColor="#080808">{{item.statusTypeName}}</tn-tag>
					<tn-tag backgroundColor="tn-bg-blue" fontColor="tn-color-white"
						v-if="item.statusName">{{item.statusName}}</tn-tag>
				</view>
				<view class="tn-padding-top-xs" v-if="item.customerName">
					客户名称<text class="tn-color-gray tn-padding-left-sm">{{item.customerName}}</text>
				</view>
				<view class="tn-padding-top-xs" v-if="item.totalPrice">
					金额<text class="tn-color-gray tn-padding-left-sm">{{item.totalPrice}}</text>
				</view>
				<view class="tn-padding-top-xs" v-if="item.ownerUserName">
					负责人<text class="tn-color-gray tn-padding-left-sm">{{item.ownerUserName}}</text>
				</view>
				<view class="tn-padding-top-xs" v-if="item.areaName">
					地区<text class="tn-color-gray tn-padding-left-sm">{{item.areaName}}</text>
				</view>
				<view class="tn-padding-top-xs" v-if="item.contactLastTime">
					最后跟进<text class="tn-color-gray tn-padding-left-sm">{{formatDate(item.contactLastTime)}}</text>
				</view>
				<view class="tn-padding-top-xs" v-if="item.contactLastTime">
					跟进记录<text class="tn-color-gray tn-padding-left-sm">{{(item.contactLastContent)}}</text>
				</view>
				<view class="tn-padding-top-xs" v-if="item.createTime">
					下次联系时间<text class="tn-color-gray tn-padding-left-sm">{{formatDate(item.contactNextTime)}}</text>
				</view>
				<view class="tn-padding-top-xs" v-if="item.dealTime">
					预计成交<text class="tn-color-gray tn-padding-left-sm">{{formatDate(item.dealTime)}}</text>
				</view>
				<view class="tn-padding-top-xs" v-if="item.remark">
					备注<text class="tn-color-gray tn-padding-left-sm">{{item.remark}}</text>
				</view>
				<view class="tn-padding-top-xs" v-if="item.createTime">
					创建时间<text class="tn-color-gray tn-padding-left-sm">{{formatDate(item.createTime)}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			}
		},
		methods: {

			// 格式化手机号
			formatPhone(phone) {
				if (!phone) return ''
				return phone.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3')
			},

			// 格式化日期
			formatDate(timestamp) {
				if (!timestamp) return ''
				const date = new Date(timestamp)
				return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
			},

			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
		}
	}
</script>

<style>
</style>